<template>
  <transition name="fade">
    <div :class="{ 'dialog':needMask, 'dialog nomask': !needMask }" v-if="visible">
      <div class="title">
        <div class="close-btn" v-if="bigCancel" v-on:click="cancelDialog()"></div>
      </div>
      <div class="body" :style="'height:'+height">
        <slot name="body"></slot>
      </div>
    </div>
  </transition>

</template>

<script>
export default {
  name: 'MaskDialog',
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    needMask: {
      type: Boolean,
      required: false,
      default: true
    },

    bigCancel: {
      type: Boolean,
      required: false,
      default: false
    },
    height: {
      type: String,
      required: false,
      default: '100%'
    }
  },
  computed: {},
  mounted () {
    const _self = this
    document.addEventListener('keydown', event => {
      // console.log(event)
      if (event.keyCode === 27) {
        if (_self.visible) {
          _self.cancelDialog()
        }
      }
    })
  },
  methods: {
    cancelDialog () {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.dialog {
  position: fixed;
  z-index: 101;
  background: rgba(0, 0, 0, 0.65);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.5s;
  overflow: auto;
}
.nomask {
  background: rgba(0, 0, 0, 0);
}

.title {
  width: 100%;
  display: inline-block;
}

.close-btn {
  float: right;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #96999f;
  margin: 9px 100px;
  position: relative;
  background: #232b36;
}

.close-btn:before {
  content: "";
  border: 3px solid #96999f;
  width: 25px;
  position: absolute;
  top: 25px;
  left: 10px;
  transform: rotate(-45deg);
}

.close-btn:after {
  content: "";
  border: 3px solid #96999f;
  width: 25px;
  position: absolute;
  top: 25px;
  left: 10px;
  transform: rotate(45deg);
}

.body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 78%;
}

@media screen and (max-device-height: 800px) {
  .dialog {
    position: fixed;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .title {
    width: 100%;
    display: inline-block;
  }

  .close-btn {
    float: right;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    margin: 15px;
    position: relative;
  }

  .close-btn:before {
    content: "";
    border: 3px solid #ffffff;
    width: 15px;
    position: absolute;
    top: 13px;
    left: 4px;
    transform: rotate(-45deg);
  }

  .close-btn:after {
    content: "";
    border: 3px solid #ffffff;
    width: 15px;
    position: absolute;
    top: 13px;
    left: 4px;
    transform: rotate(45deg);
  }

  .body {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 70%;
  }
}
</style>
